<template>
  <div
    class="els-collapse-item"
    :class="{ 'is-active': isActive, 'is-disabled': disabled }"
  >
    <div
      role="tab"
      :aria-expanded="isActive"
      :aria-controls="`els-collapse-content-${id}`"
      :aria-describedby="`els-collapse-content-${id}`"
    >
      <div
        class="els-collapse-item__header"
        role="button"
        :id="`els-collapse-head-${id}`"
        :tabindex="disabled ? undefined : 0"
        :class="{ focusing: focusing, 'is-active': isActive }"
        @focus="handleFocus"
        @blur="focusing = false"
      >
        <slot name="header" :is-active="isActive" :handler="handleHeaderClick">
          {{ title }}
          <i
            class="els-collapse-item__arrow els-icon-arrow-right"
            :class="{ 'is-active': isActive }"
          >
          </i>
        </slot>
        <!-- <slot name="title">{{ title }}</slot> -->
        <!-- <i -->
        <!--   class="el-collapse-item__arrow el-icon-arrow-right" -->
        <!--   :class="{ 'is-active': isActive }" -->
        <!-- > -->
        <!-- </i> -->
      </div>
    </div>
    <els-collapse-transition @transitions="emitTransformEvent">
      <div
        class="els-collapse-item__wrap"
        v-show="isActive"
        role="tabpanel"
        :aria-hidden="!isActive"
        :aria-labelledby="`els-collapse-head-${id}`"
        :id="`els-collapse-content-${id}`"
      >
        <div class="els-collapse-item__content">
          <slot></slot>
        </div>
      </div>
    </els-collapse-transition>
  </div>
</template>
<script>
// import ElsCollapseTransition from "../../utils/transitions/collapse-transition.js";
import ElsCollapseTransition from "./collapse-transition.vue";
import Emitter from "../../mixins/emitter";
import { generateId } from "../../utils/util";

export default {
  name: "ElsCollapseItem",

  componentName: "ElsCollapseItem",

  mixins: [Emitter],

  components: { ElsCollapseTransition },

  data() {
    return {
      contentWrapStyle: {
        height: "auto",
        display: "block",
      },
      contentHeight: 0,
      focusing: false,
      isClick: false,
      id: generateId(),
    };
  },

  inject: ["collapse"],

  props: {
    title: String,
    name: {
      type: [String, Number],
      default() {
        return this._uid;
      },
    },
    disabled: Boolean,
  },

  computed: {
    isActive() {
      return this.collapse.activeNames.indexOf(this.name) > -1;
    },
  },

  methods: {
    handleFocus() {
      setTimeout(() => {
        if (!this.isClick) {
          this.focusing = true;
        } else {
          this.isClick = false;
        }
      }, 50);
    },
    emitTransformEvent(type, el) {
      this.collapse.$emit("transitions", type, el);
    },
    handleHeaderClick() {
      if (this.disabled) return;
      this.dispatch("ElsCollapse", "item-click", this);
      this.focusing = false;
      this.isClick = true;
    },
    handleEnterClick() {
      this.dispatch("ElsCollapse", "item-click", this);
    },
  },
};
</script>
<style scoped lang="less">
.els-collapse-item {
  &.is-disabled .els-collapse-item__header {
    color: #bbb;
    cursor: not-allowed;
  }
  .els-collapse-item__header {
    // display: flex;
    // align-items: center;
    // height: 48px;
    // line-height: 48px;
    // background-color: #fff;
    // color: #303133;
    // cursor: pointer;
    user-select: none;
    // border-bottom: 1px solid #ebeef5;
    // font-size: 13px;
    // font-weight: 500;
    // -webkit-transition: border-bottom-color 0.3s;
    transition: border-bottom-color 0.3s;
    outline: 0;
    padding: 10px;
    // &.focusing:focus:not(:hover) {
    //   color: #409eff;
    // }
    //
    // &.is-active {
    //   border-bottom-color: transparent;
    // }
  }
  .els-collapse-item__arrow {
    // margin: 0 8px 0 auto;
    // -webkit-transition: -webkit-transform 0.3s;
    // transition: -webkit-transform 0.3s;
    // transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    font-weight: 300;
    &.is-active {
      transform: rotate(90deg);
    }
  }
}

.els-collapse-item__wrap {
  will-change: height;
  // background-color: #fff;
  overflow: hidden;
  // -webkit-box-sizing: border-box;
  // box-sizing: border-box;
  // border-bottom: 1px solid #ebeef5;
}

.els-collapse-item__content {
  // padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
}

.els-collapse-item:last-child {
  margin-bottom: -1px;
}
</style>
